<template>
  <div class="left-block3">
    <div class="data-title">
      生产计划
    </div>
    <!--    <div style="height: 220px">-->
    <!--      <p-echarts :option="option" />-->
    <!--    </div>-->
    <div class="static-info">
      <p class="com1">
        <el-button  @click="lings()" >1111</el-button>
        <span class="num" v-text="total.planStage" />
        <span class="t"><i class="iconfont icon-yuanhuan" />计划完成</span>
      </p>
      <p class="com2">
        <span class="num" v-text="total.planFinshNumber" />
        <span class="t"><i class="icon-wancheng iconfont"  />实际完成</span>
      </p>
    </div>
    <div class="com-list scroll-wrap" style="height: 150px">
      <div v-for="(item,index) in list" :key="index" class="item">
        <div class="date">
          <span class="d">{{ item.dateStr|dateFormat('M月DD日') }}</span>
          <span class="icon-circle iconfont" />
        </div>
        <div v-for="(c, cindex) in item.dataInfo" :key="cindex" class="time" id="ddd">
          <span class="t">{{ c.planTime|dateFormat('HH:mm') }}</span>
          <template v-if="c.status===0">
            <span class="iconfont icon-yuanhuan" />
            <span class="name text-ellipsis">{{ c.planName }}</span>
          </template>
          <template v-if="c.status===1" >
            <span class="iconfont icon-yuanhuan" id="sss" style="color: #F5A623" />
            <span class="name text-ellipsis" style="font-size: 16px; color: #F5A623;">{{ c.planName }}</span>
            <span class="name text-ellipsis" style="font-size: 10px; color: #50E3C2;float: right; width: 60px;line-height: 20px">进行中</span>
          </template>
          <template v-if="c.status===2">
            <span class="iconfont icon-wancheng" />
            <span class="name text-ellipsis">{{ c.planName }}</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { postHandle } from '@/api'
import PEcharts from '@/components/charts/pEcharts'
import dayjs from 'dayjs'
export default {
  name: 'ProductionPlan',
  components: { PEcharts },
  data() {
    return {
      total: {},
      list: [],
      statisticsData: []
    }
  },
  computed: {
    option() {
      return {
        backgroundColor: '#03041C',
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: 25,
          textStyle: {
            color: '#EEEEF2'
          },
          icon: 'rect',
          itemWidth: 14,
          data: ['计划完成', '实际完成'],
          formatter: (name) => {
            if (this.statisticsData) {
              if (name === '计划完成') {
                let sum = (this.statisticsData.map(item => item.finish + item.unfinished)).reduce((acc, cur) => { return acc + cur }, 0)
                return '{a|' + sum + '}\n{b|' + name + '}'
              } else {
                let sum = (this.statisticsData.map(item => item.finish)).reduce((acc, cur) => { return acc + cur }, 0)
                return '{a|' + sum + '}\n{b|' + name + '}'
              }
            } else {
              return '{a|0}\n{b|' + name + '}'
            }
          },
          textStyle: {
            rich: {
              a: {
                align: 'left',
                verticalAlign: 'top',
                color: '#FFFFFF',
                fontSize: 28,
                padding: [0, 0, -30, -10]
              },
              b: {
                verticalAlign: 'bottom',
                color: '#fff'
              }
            }
          }
        },
        grid: {
          top: '30%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          name: dayjs().format('M月'),
          nameLocation: 'start',
          nameTextStyle: {
            color: '#EEEEF2',
            padding: [30, 0, 0, 0]
          },
          nameGap: 10,
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#808eb7'
            }
          },
          data: this.statisticsData.map(item => dayjs(item.time).format('D'))
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: '#EEEEF2'
            }
          },
          splitLine: { // 分割线配置
            lineStyle: {
              color: '#979797'
            }
          }
        },
        series: [{
          name: '计划完成',
          type: 'bar',
          zlevel: 1,
          barGap: '-100%',
          barMaxWidth: 30,
          data: this.statisticsData.map(item => item.finish + item.unfinished),
          itemStyle: {
            color: '#525367',
            opacity: 0.9
          }
        },
        {
          name: '实际完成',
          type: 'bar',
          zlevel: 2,
          barMaxWidth: 30,
          data: this.statisticsData.map(item => item.finish),
          itemStyle: {
            color: '#50E3C2'
          }
        }
        ]
      }
    }
  },
  created() {
    this.getData()
    this.getCount(this.$route.query.id)
    this.getStatisticsData()
   
  },
  methods: {
 
    getData() {
      postHandle(`/api/v1/welder-sbtx-second/plan-info-comb/list`, {
        d: {
          filters: [
            {
              field: 'projectId',
              operator: 'EQUALS',
              value: this.$route.query.id
            }
          ],
          sorts: [{ field: 'planTime', isDesc: false }]
        }
      }).then(res => {
        this.list = res.result
      })
    },
    getCount(id) {
      postHandle(`/api/v1/welder-sbtx-second/plan-info-comb/count/${id}`).then(res => {
        this.total = res.result
      })
    },
    getStatisticsData() {
      postHandle('/api/v1/welder-sbtx-second/plan-info-comb/screen-count', {
        d: {
          filters: [
            { field: 'projectId', operator: 'EQUALS', value: this.$route.query.id },
            { field: 'planTime', operator: 'BETWEEN', value: dayjs().startOf('month').valueOf(), value_to: dayjs().endOf('month').valueOf() }
          ]
        }
      }).then(res => {
        this.statisticsData = res.result
      })
    }
  }
}
</script>

<style scoped>

</style>
